<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram of a Charge in a Conductor Shell</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="450"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // --- Parameters and Style ---
        const centerX = 250;
        const centerY = 200;
        const innerRadius = 100;
        const shellThickness = 30;
        const outerRadius = innerRadius + shellThickness;
        const chargeDistanceA = 65;
        
        ctx.lineWidth = 2;
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        const varFont = 'italic 24px Times New Roman';
        const textFont = '24px KaiTi'; // A common font for Chinese characters

        // --- Helper function for drawing arrowheads ---
        function drawArrowhead(ctx, fromX, fromY, toX, toY, headLength = 10) {
            const angle = Math.atan2(toY - fromY, toX - fromX);
            ctx.save();
            ctx.beginPath();
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
            ctx.restore();
        }

        // --- 1. Create hatching pattern for the conductor ---
        const patternCanvas = document.createElement('canvas');
        const pctx = patternCanvas.getContext('2d');
        patternCanvas.width = 10;
        patternCanvas.height = 10;
        pctx.strokeStyle = '#333';
        pctx.lineWidth = 1;
        pctx.beginPath();
        pctx.moveTo(0, 10);
        pctx.lineTo(10, 0);
        pctx.stroke();
        const hatchPattern = ctx.createPattern(patternCanvas, 'repeat');

        // --- 2. Draw the spherical shell ---
        // Fill the area between circles with the pattern
        ctx.fillStyle = hatchPattern;
        ctx.beginPath();
        ctx.arc(centerX, centerY, outerRadius, 0, 2 * Math.PI, false); // Outer path
        ctx.arc(centerX, centerY, innerRadius, 0, 2 * Math.PI, true);  // Inner path (reversed for hole)
        ctx.fill();

        // Draw the outlines of the shell
        ctx.beginPath();
        ctx.arc(centerX, centerY, outerRadius, 0, 2 * Math.PI);
        ctx.stroke();

        ctx.beginPath();
        ctx.arc(centerX, centerY, innerRadius, 0, 2 * Math.PI);
        ctx.stroke();

        // --- 3. Draw the center point 'O' ---
        ctx.fillStyle = 'black';
        ctx.beginPath();
        ctx.arc(centerX, centerY, 3, 0, 2 * Math.PI);
        ctx.fill();
        ctx.font = varFont;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'top';
        ctx.fillText('O', centerX - 5, centerY + 8);

        // --- 4. Draw the point charge '+q' ---
        const chargeX = centerX + chargeDistanceA;
        const chargeY = centerY;
        ctx.fillStyle = 'black';
        ctx.beginPath();
        ctx.arc(chargeX, chargeY, 3, 0, 2 * Math.PI);
        ctx.fill();
        ctx.font = varFont;
        ctx.textAlign = 'left';
        ctx.textBaseline = 'middle';
        ctx.fillText('+q', chargeX + 8, chargeY + 5);

        // --- 5. Draw the distance 'a' line and label ---
        ctx.beginPath();
        ctx.moveTo(centerX, centerY);
        ctx.lineTo(chargeX, chargeY);
        ctx.stroke();
        drawArrowhead(ctx, centerX, centerY, chargeX, chargeY);
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillText('a', centerX + chargeDistanceA / 2, centerY - 8);

        // --- 6. Draw the radius 'R' line and label ---
        const angleR = Math.PI * 0.75; // 135 degrees
        const endRx = centerX + innerRadius * Math.cos(angleR);
        const endRy = centerY + innerRadius * Math.sin(angleR);
        ctx.beginPath();
        ctx.moveTo(centerX, centerY);
        ctx.lineTo(endRx, endRy);
        ctx.stroke();
        drawArrowhead(ctx, centerX, centerY, endRx, endRy);
        
        // Position the label 'R' near the midpoint of the radius line
        const midRx = centerX + innerRadius * 0.5 * Math.cos(angleR);
        const midRy = centerY + innerRadius * 0.5 * Math.sin(angleR);
        ctx.textAlign = 'left';
        ctx.textBaseline = 'bottom';
        ctx.fillText('R', midRx + 5, midRy - 5);

        // --- 7. Draw the caption ---
        ctx.font = textFont;
        ctx.fillStyle = 'black';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'top';
        ctx.fillText('题 6 图', centerX, outerRadius + centerY + 30);
    </script>
</body>
</html>